<template>
  <div class="app-container">
    <h2>统计报表</h2>
    
    <el-card shadow="hover" class="mb-20">
      <el-form :inline="true" class="search-form">
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="数据类型">
          <el-select v-model="dataType" placeholder="请选择">
            <el-option label="用户增长" value="user" />
            <el-option label="交易量" value="transaction" />
            <el-option label="活跃度" value="active" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="generateReport">生成报表</el-button>
          <el-button @click="exportData">导出数据</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-tabs v-model="activeName">
      <el-tab-pane label="图表展示" name="chart">
        <el-card shadow="hover">
          <div class="chart-container">
            <div class="chart-placeholder">
              数据报表图表展示区域（实际项目中使用ECharts实现）
            </div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="数据列表" name="table">
        <el-card shadow="hover">
          <el-table :data="reportData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="150" />
            <el-table-column prop="newUsers" label="新增用户" />
            <el-table-column prop="activeUsers" label="活跃用户" />
            <el-table-column prop="transactions" label="交易量" />
            <el-table-column prop="revenue" label="收入" />
            <el-table-column prop="conversion" label="转化率" />
          </el-table>
          
          <div class="pagination-container">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="100"
            />
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 查询参数
const dateRange = ref([])
const dataType = ref('user')
const activeName = ref('chart')

// 生成报表
const generateReport = () => {
  if (dateRange.value.length !== 2) {
    ElMessage.warning('请选择日期范围')
    return
  }
  ElMessage.success('报表生成成功')
}

// 导出数据
const exportData = () => {
  ElMessage.success('数据导出成功')
}

// 模拟报表数据
const reportData = ref([
  { 
    date: '2023-05-01', 
    newUsers: 120, 
    activeUsers: 1350, 
    transactions: 283, 
    revenue: '￥15,834', 
    conversion: '8.5%' 
  },
  { 
    date: '2023-05-02', 
    newUsers: 132, 
    activeUsers: 1423, 
    transactions: 312, 
    revenue: '￥17,452', 
    conversion: '9.2%' 
  },
  { 
    date: '2023-05-03', 
    newUsers: 101, 
    activeUsers: 1352, 
    transactions: 287, 
    revenue: '￥14,253', 
    conversion: '8.1%' 
  },
  { 
    date: '2023-05-04', 
    newUsers: 134, 
    activeUsers: 1486, 
    transactions: 324, 
    revenue: '￥18,453', 
    conversion: '9.6%' 
  },
  { 
    date: '2023-05-05', 
    newUsers: 156, 
    activeUsers: 1523, 
    transactions: 345, 
    revenue: '￥21,456', 
    conversion: '10.2%' 
  }
])
</script>

<style scoped>
.app-container {
  width: 100%;
  padding: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
}

.chart-container {
  padding: 10px 0;
}

.chart-placeholder {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 4px;
  color: #909399;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 